<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../js/swiper.min.js"></script>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .arrow-bottom.bb {
            transform: rotate(180deg)
        }
        
        .box-1 {
            position: fixed;
            left: 5%;

            width: 90%;
            right: 5%;
            z-index: 1111;
            top: 20%;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
        }
        
        .box-1 p {
            height: .47rem;
            justify-content: space-between;
            align-items: center;
            font-size: .16rem;
            color: rgba(18, 18, 18, 0.9);
        }
        
        .box-1 p span {
            flex: 1;
            margin-right: .08rem;
            text-align: right;
        }
        
        .box-1 p em {
            font-size: .14rem;
            flex: 6;
            color: rgba(255, 0, 0, 0.9);
        }
        
        .box-1 p input {
            color: rgba(18, 18, 18, 0.25);
            font-size: .14rem;
            flex: 6;
        }
        
        .box-1 .button {
            margin-top: .08rem;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .08rem;
        }
        
        .box-1 .button span {
            width: 45%;
            line-height: .32rem;
            display: block;
            text-align: center;
        }
        
        .box-1 .button .button-1 {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }
        
        .box-1 .button .button-2 {
            background: rgba(101, 180, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }
        
        .box-1 .tip {
            height: auto;
            color: rgba(18, 18, 18, 0.25);
            font-size: .08rem;
            justify-content: space-between;
            align-items: center;
        }
        
        .box-1 .tip span {
            background: url(../img/起@2x.png) no-repeat left;
            padding-left: .11rem;
            background-size: .09rem .11rem;
            text-align: left;
        }
        
        .box-1 .tip em {
            flex: none;
            color: rgba(18, 18, 18, 0.25);
            font-size: .12rem;
        }
        
        .box-2,
        .box-3,
        .box-4 {
            width: 90%;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
            position: fixed;
            z-index: 1111;
            top: 20%;
            left: 5%;
            right: 5%;
        }
        
        .box-2 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px;
        }
        
        .box-2 div {
            justify-content: space-between;
            align-items: center;
        }
        
        .box-2 div input {
            box-sizing: border-box;
            width: 1.4rem;
            line-height: .48rem;
            padding: .12rem;
            border: none;
            background: #fff;
            color: rgba(18, 18, 18, 1);
            font-size: .16rem;
        }
        
        .box-2 div span {
            text-align: center;
            display: block;
            width: 1.99rem;
            line-height: .48rem;
            background: rgba(18, 18, 18, 0.08);
        }
        
        .box-2 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }
        
        .box-2 .button,
        .box-3 .button {
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
            text-align: center;
            line-height: .32rem;
            
            display: block;
            margin: 0 auto;
            background: rgba(95, 49, 4, 1);
            margin-top: .08rem;
        }
        
        .box-3 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px
        }
        
        .box-3 div input {
            box-sizing: border-box;
            width: 3.51rem;
            line-height: .48rem;
            background: #fff;
            padding: 0 .12rem;
            color: rgba(18, 18, 18, 1);
        }
        
        .box-3 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }
        .box-4 h5{
        	text-align: center;
        	height: 0.24rem;
        	line-height: 0.24rem;
        	padding: 0.12rem 0;
        	font-size: 0.24rem;
        }
        .box-4 li{
        	margin-top: 0.12rem;
        }
        .box-4 li p,.box-4 li a{
        	float: left;
        	font-size: 0.16rem;
        	line-height: 0.16rem;
        }
        .box-4 li a{
        	color: #5F3104;
        	text-decoration: underline;
        }
        
        
        
        
        .e2s {
            margin-left: .16rem;
            padding-left: .16rem;
            background: url('../img/收藏 01@2x.png') no-repeat left;
            background-size: .14rem;
        }
        
        .e1s {
            padding-left: .16rem;
            background: url('../img/热度 01@2x.png') no-repeat left;
            background-size: .1rem;
        }
        
        .new_pai {
            width: 3.19rem;
            margin: auto;
            background: #F7F7F7;
            border: 1px solid #F7F7F7;
        }
        
        .new_pai_on {
            width: 100%;
            height: 0.32rem;
            margin-top: 0.06rem;
        }
        
        .new_pai_on_left {
            width: 0.32rem;
            height: 0.32rem;
            float: left;
            margin-left: 0.08rem;
        }
        
        .new_pai_on_left img {
            width: 0.32rem;
            height: 0.32rem;
        }
        
        .new_pai_on_right {
            height: 0.2rem;
            float: left;
            margin-left: 0.08rem;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(18, 18, 18, 0.90);
        }
        
        .new_pai_center {
            /*height: 0.15rem;*/
            font-family: PingFangSC-Regular;
            font-size: 0.1rem;
            color: rgba(18, 18, 18, 0.90);
            letter-spacing: -0.02px;
            padding-left: 0.08rem;
            margin-top: 0.05rem;
        }
        
        .new_pai_up {
            height: 0.2rem;
            font-size: 10px;
            color: rgba(18, 18, 18, 0.25);
            letter-spacing: -0.02px;
            text-align: right;
            line-height: 0.2rem;
            padding-right: 0.08rem;
            margin-top: 0.03rem;
        }
        
        .buy-info-page .s5 .t1 .t1-1 {
            display: inline-block;
        }
        
        .buy-info-page .s4>p span {
            display: inline-block;
        }
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5; /* 透明度 */
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
            right: 0;
            bottom: 0;
        }
        .imghaha{
            width: 1rem;
            height: 1rem;
            margin: 0.05rem 0;
        }
        .imghaha:nth-of-type(2){
        	margin: 0.05rem 0.03rem;
        }
        .swiper-container{
            width: 100%;
            height: 3.75rem;
        }
        .swi-img{
            width: 100%;
            height: 3.75rem;
        }
        #shopnum{
        	position: fixed;
            left: 5%;
            width: 90%;
            right: 5%;
            z-index: 1111;
            top: 35%;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
        }
        #shopnum .shop_btn{
        	    margin-top: .08rem;
			    justify-content: space-between;
			    align-items: center;
			    margin-bottom: .08rem;
        }
        #shopnum .shop_btn span{
        	width: 45%;
        	line-height: .32rem;
        	text-align: center;
        	display: block;
        	font-size: 0.14rem;
        	background: rgba(255, 0, 0, 1);
        	color: #FFF;
        }
        
        #shopnum .shop_btn .button-2{
        	background: rgba(101, 180, 15, 1);
        	margin-left: ;
        }
        #shopnum .tit p,#shopnum .tit span{
        	float: left;
        }
        #shopnum .tit span{
        	font-size: 0.12rem;
        	color: #CCC;
        	line-height: 0.18rem;
        	margin-left: 0.1rem;
        } 
        #shopnum .tit input{
        	width: 100%;
        	border: none;
        	outline: none;
        }
        .pro_details{
        		padding:0!important;
        		margin-top:0.14rem;
        		margin-bottom:0.08rem;
        }
        .check_more{
        		display:inline-block;
        		width:0.76rem;
        		height:0.24rem;
        		text-align: right;
        		color:#C6C6C6;
        		font-size:0.12rem;
        		background:url(../img/more.png) no-repeat center;
        		background-size:cover!important;
        }
        .overflowhidden2{
        		display:-webkit-box;
        		word-break: break-all;
        		text-overflow: ellipsis;
        		-webkit-box-orient:vertical;
        		-webkit-line-clamp: 10;
        		overflow:hidden;
        }
    </style>
</head>

<body>
    <!--头部-->
    <!--    <div class="public-header flex">
        &lt;!&ndash;<span class="public-header-left-search"></span>&ndash;&gt;
        <span class="public-header-left-back"></span>
        <span class="public-header-center">投诉记录</span>
        <span class="public-header-right" onclick='javascript:window.location.href="../page/My-footprints.html"'>足迹</span>
    </div>-->
    <div id="overlay" v-show="isss" @click='hide()'></div>
    <div id="loadingToast" class="weui_loading_toast" style="display:block;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <div class="weui_loading">
                <!-- :) -->
                <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                <div class="weui_loading_leaf weui_loading_leaf_11"></div>
            </div>
            <p class="weui_toast_content">数据加载中...</p>
        </div>
    </div>
    <!--正文-->
    <div id="mains" style="display: none">
        <div class="buy-info-page bc-gray" >
            <div class="swiper-container">
                <div class="swiper-wrapper" id="index_banner">
                    <!--<div class="swiper-slide" v-for="(item,index) in bannerData">-->
                        <!--<img :src="" class="swi-img">-->
                    <!--</div>-->
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!--<img :src="datas.produce_head_image" alt="">-->
            <!-- <img src="../img/配图@2x.png" alt=""> -->
            <section class="s1">
                <p class="t1">{{datas.produce_title}} </p>
                <p class="t2">
                    <span v-html="hahas(datas.produce_add_time)"></span>
                    <em class="e1" v-if='datas.seven_return == 0'>不支持退换</em>
                    <em class="e1" v-if='datas.seven_return == 1'>支持退换</em>
                    <em class="e2" v-if="datas.mail == 1">包邮</em>
                    <em class="e2" v-if="datas.mail == 0">不包邮</em>
                    <em class="e3" v-if="datas.is_Identifiable != ''" @click="kejianding(datas.is_Identifiable)">可鉴定</em>
                    <!--<em class="e3" v-if="datas.is_Identifiable == ''">不可鉴定</em>-->
                </p>
                <p class="t3">
                    <span @click="tsha()">投诉</span>
                    <em class="e2" v-show="iscollect" @click='add_Collection(this)'>{{produce_collect_num}}</em>
                    <em class="e2s" v-show="!iscollect" @click='add_Collection(this)'>{{produce_collect_num}}</em>
                    <em class="e1" v-show="is1" @click='add_good(this)' style="color:#000">{{produce_good_num}}</em>
                    <em class="e1s" v-show="!is1" style="color:#000">{{produce_good_num}}</em>
                </p>
                <p class="t4"><span>距离结束：</span><em>{{down_time}}</em></p>
            </section>
            <section class="s2">
            	<div id="" class="clearfix flex">
            		<div style="position: relative;">
            			<img :src="datas.store_image" alt="店铺头像" @click = "show_info_phone()">
						<img v-if='datas.enterprise_name' style="width: 0.15rem;height:0.15rem;position: absolute;right: -0.17rem;bottom: 0;padding: 0;margin: 0;" id="qy_or_gr" src="../img/qiye.png" />
            		</div>
	                <div class="right">
	                    <p style="margin-bottom: 10px;"><span>{{datas.store_name}}</span><em>{{datas.store_level}}</em>
	                        <i v-show="isguanzhu" @click="clickGz">未关注</i>
	                        <i v-show="!isguanzhu" @click="cancelGz">取消关注</i>
	                        <font v-if="datas.store_authority"></font>
	                    </p>
	                    <p><!--<span>联系卖家</span>--><i>{{datas.store_amount_guaranteed}}元</i><!--<em>{{datas.store_score}}分</em>--></p>
	                </div>
            	</div>
                <p class="pro_details" style="padding: 0.14rem 0;font-size: 0.14rem;color: #121212;">
                		<!--{{datas.produce_describe}}-->
                		<p>【品名】{{datas.produce_title}}</p>
                		<p>【泥料】{{datas.paste_materials}}</p>
                		<p>【制作者】{{datas.author}}</p>
                		<p>【尺寸】{{datas.measure}}</p>
                		<p class="e2" v-if="datas.mail == 1">【是否包邮】包邮</p>
                    	<p class="e2" v-if="datas.mail == 0">【是否包邮】不包邮</p>
                    	<p>【备注】{{datas.remark}}</p>
                    	<p>【制作工艺】{{datas.technology}}</p>
                    	<p>【产地】{{datas.production_place}}</p>
                    	<p>【产品介绍】{{datas.produce_describe}}</p>
                    	<p>【破损/退换货问题】{{datas.question}}</p>
                    	<p>【产品保障】{{datas.guarantee}}</p>
                </p>
                <div style="width:100%;text-align: center;">
                		<span class="check_more" @click="moreinf(this)"></span>
                </div>
           		
            </section>
            <!--最新成交-->
            <section class="s5">
                <p class="t1">
                    <span class="t1-1">最新出价</span>
                    <!--<span class="t1-2">更多</span>-->
                </p>
                <ul>
                    <p v-if="RecentTransaction.length == 0" style="text-align: center;margin-top: 20px;">暂无最近出价记录</p>
                    <p v-else>
                        <li class="flex" :class='{red:$index == 0,gray:$index>0}' v-for='item in RecentTransaction'>
                            <div class="li-1">
                                <img :src="item.user_image" alt="">
                            </div>
                            <div class="li-2">
                                <p class="li-2-1">{{item.user_nike_Name}}</p>
                                <p class="li-2-2">￥{{item.offer}}</p>
                            </div>
                            <div class="li-3">
                                <br><span v-html="hahas(item.time)"></span>
                            </div>
                        </li>
                    </p>
                </ul>
                <!-- <em class="arrow-bottom"></em> -->
            </section>
            <!--<section class="s6"></section>-->
            <section class="s3 flex">
                <div class="a1">
                    <font>起</font><em>￥</em><i>{{datas.starting_price}}</i>
                </div>
                <div class="a2">
                    <font>加</font><em>￥</em><i>{{datas.produce_auction_number}}</i>
                </div>
                <div class="a3">
                    <font>保</font><em>￥</em><i>10</i><!-- {{datas.auction_deposit}} -->
                </div>
                <!--<div class="a4">
                    <font>延</font><i>0</i><em>次</em>
                </div>-->
                <div class="a5">
                    <font style="width:0.5rem;">一口价</font><em>￥</em><i>{{datas.produce_money}}</i>
                </div>
            </section>
            <section class="s5" style="display: none;">
                <p class="t1">
                    <span class="t1-1" style="background:url(../img/cco.png) no-repeat left;background-size: 0.2rem;">最新评价</span>
                    <!--<span class="t1-2">更多</span>-->
                </p>
                <div id="comment">
                    <div class="new_pai">
                        <div class="new_pai_on">
                            <div class="new_pai_on_left">
                                <img src="../img/qq@2x.png" />
                            </div>
                            <div class="new_pai_on_right">用户名</div>
                        </div>
                        <div class="new_pai_center">默认展示两条</div>
                        <div class="new_pai_up">17-07-03 10:31:13</div>
                    </div>
                </div>
                <!-- <div style="text-align: center;">
						<em class="arrow-bottom" id="commentarrow" ons="0"></em>
					</div> -->
            </section>
            <section class="s4">
                <p class="">
                    <span>店铺产品</span>
                    <!--<em>拍卖公告</em>-->
                </p>
                <div>
                    <ul class="clearfix">
                        <div style="text-align: center;margin-top: 100px;" v-if="produce_list.length == 0 ">店铺暂无产品</div>
                        <div v-else>
                            <li class="" v-for='item in produce_list'>
                                <img :src="item.produce_head_image.split(',')[0]" alt="" @click='link_buy(this)'>
                                <p class="t1" style="height: 1.6em;overflow: hidden;line-height: 1.6em;">{{item.produce_describe}}</p>
                                <p class="t2"><span>￥:{{item.starting_price}}起</span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em></p>
                            </li>
                        </div>

                    </ul>
                </div>
            </section>
        </div>
        <div class="buy-footer">
            <div class="c1" v-if="doing">
                <span @click='join_store(this)'>进店逛逛</span>
                <em>{{death_time}}</em>
            </div>
            <div class="c4" v-else>
                <div class="top">
                    <p class="t1">
                        <span style="display:inline-block;background:url('../img/起 红@2x.png') no-repeat center;background-size:contain;width:.16rem;height:.16rem;"></span>
                        <em>￥:{{datas.starting_price}}</em>
                    </p>
                    <p class="t2">
                        <span>距离结束：</span>
                        <em>{{down_time}}</em>
                    </p>
                    <!--    <p class="t3">
                    <em class="e1" @click='add_good(this)' style="color:#000;">{{datas.produce_good_num}}</em>
                    <em class="e2" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                    <em class="e3">{{datas.produce_share_num}}</em>
                </p>-->
                    <p class="p4">{{datas.produce_title}} </p>
                </div>
                <div class="bottom flex" v-if="down_time != '已结束'">
                    <span @click='join_store(this)'>进店逛逛</span>
                    <div class="center" style="background: #fa4535;color: #fff;" @click="ykj(this,datas.produce_money)">
                        <p class="p1">购买</p>
                        <p class="p2">￥{{datas.produce_money}}</p>
                    </div>
                    <em style="background:rgba(95,49,4,1);color:#fff" @click='alertCj()'>竞拍出价</em>
                </div>
                <div class="bottom flex" v-if="down_time == '已结束'">
                    <span @click='join_store(this)'>进店逛逛</span>
                    <em>已结束</em>
                </div>
            </div>
        </div>
        <div class="box-1" v-if="step3" style="display: block;position: absolute;">
            <p class="price flex" v-if="RecentTransaction.length != 0">
                <span style="flex: inherit;">领先价</span>
                <em v-else>{{RecentTransaction[0].offer}}元</em>
            </p>
            <p class="price-self " style="background:#fff;">
                <span>出价</span>
                <input style="border:none;line-height: 0.47rem;display:inline-block;height: 0.47rem;font-size:0.14rem" type="number" pattern="\d*" placeholder="出价不能低于起价" v-model="cjprice">
            </p>
            <div class="button flex">
                <!--<span class="button-1" >一口价 ￥{{datas.produce_money}}</span>-->
                <span class="button-1" @click="hideCj">取消</span>
                <span class="button-2" @click='bid()'>确认</span>
            </div>
            <p class="tip flex">
                <span>￥{{datas.starting_price}}</span>
                <em>出价即表示同意<a style="color: #5F3104;text-decoration: underline;" href="./zthxy.html">《紫陶汇竞拍服务协议》</a></em>
            </p>
        </div>
		<div id="shopnum" v-if='shopnumshow'>
			<div class="tit">
				<b class="clearfix"><p>输入购买数量</p><span>剩余数量：{{produce_con}}</span></b>
				<input value="1" placeholder="请输入购买数量" type="number" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"/>
			</div>
			<div class="shop_btn flex">
                <span class="button-1" @click="hideCj">取消</span>
                <span class="button-2" @click='shopnumfun(datas.produce_money)'>确认</span><!--数量提示-->
            </div>
		</div>
        <div class="box-3" v-if="step1" style="display: block;">
            <p class="t1">请输入你的电话号码，方便卖家联系</p>
            <div class="">
                <input style="border: none;width: auto" type="number" pattern="\d*" v-model="telphone" placeholder="输入手机号码">
            </div>
            <div class="clearfix">
            	<input  style="border: none;width: auto;float: left;" type="text" v-model="pic_num" placeholder="图形验证码"/>
            	<img style="float: left;width: 1.2rem;height: 0.48rem;" id="pic_sign_url" src="" @click="get_pic_num()"/>
            </div>
            <p class="t2">验证号码后才能继续出价</p>
            <span class="button" @click='ChangeStepType()' style="width: auto;">确认</span>
        </div>

        <div class="box-2" v-if="step2" style="display: block;">
            <p class="t1">
                <span>验证码</span>
                <em>已发送至 {{telphone}}</em>
            </p>
            <div class="flex">
                <input style="border: none;" type="number" pattern="\d*" placeholder="验证码" v-model="vInteger_0">
                <span>已发送</span>
            </div>
            <p class="t2">验证号码后才能继续出价</p>
            <span class="button" @click='vInteger_click(this)'>确认</span>
        </div>
        
        <div class="baozhengjin box-1" v-if="step4"><!--买家出价前保证金-->
        	<div class="tit">
				<b class="clearfix"><p style="height: initial;">第一次出价前需要缴纳保证金10元</p></b>
				<input value="10" placeholder="请输入购买数量" type="number" disabled="disabled" style="border: none;font-size: 0.14rem;background: none;"/>
			</div>
			<div class="shop_btn button flex">
                <span class="button-1" @click="hideCj">取消</span>
                <span class="button-2" @click='zhifu(1000)'>支付</span><!--数量提示-->
            </div>
            <p class="tip flex">
                <span>￥{{datas.starting_price}}</span>
                <em>出价即表示同意<a style="color: #5F3104;text-decoration: underline;" href="./zthxy.html">《紫陶汇竞拍服务协议》</a></em>
            </p>
        </div>
        
        <div class="box-4" v-if = "store_info_phone"><!--点击头像出来的店铺信息-->
        	<h5>紫陶名片</h5>
        	<ul>
        		<!--<li><img :src="datas.store_image" alt="店铺头像"></li>-->
        		<li class="store_name1 clearfix">
        			<p>店铺名称:</p>
        			<p>{{datas.store_name}}</p>
        		</li>
        		<li class="store_phone1 clearfix">
        			<p>店铺电话:</p>
        			<a :href = " 'tel:' + datas.user_Phone ">{{datas.user_Phone}}</a>
        		</li>
        		<li class="store_weixin1 clearfix" v-if="datas.user_weixin!=''">
        			<p>紫陶汇客服:</p>
        			<a href="tel:08738882999">0873-8882999</a>
        		</li>
        	</ul>
        </div>
    </div>
    <div class="lookimg" @click="closeimg()" style="display:none;position:fixed;z-index:100000;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.8)">
    		<img style="width:100%;position:absolute;top:0;right:0;left:0;bottom:0;margin:auto" class="imgsbox" src="" alt="" />
    </div>
    </body>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
    var p_id = getQueryString('p_id');//产品id
    var auction_special = getQueryString('auction_special') == 1?1:null;
 	var user_inf = '' ; 
	var returnVal = {
		shareTitle:'',//分享的title
		shareLink:'',//分享的链接
		shareImgurl:'',//分享的图片
	};//分享需要发送的数据
        $(function() {
		var store_id = sessionStorage.s_id;//获取本地存储的商户id
        var user_id = sessionStorage.u_id;
        var fanhuistoreid = '';//获取ajax返回的店铺Id
            setTimeout(function() {//进入页面先显示菊花效果，然后显示页面
                $("#loadingToast").hide();
                $("#mains").show();
                $('.buy-info-page').css('height','initial');
				////console.log($('body').height());
				$('#overlay').css('height',$('body').height());
            }, 1000);
            $(window).scroll(function() {//当页面滚动的时候，贴顶显示
                if ($(window).scrollTop() > 50) {
                    $('.buy-footer .c4 .top').css('display','none')
                } else {
                    $('.buy-footer .c4 .top').css('display','block')
                }
            });
            
            $.ajax({
                url:base_url+"ZITAOHUI/auctionProduce",
                data:{
                    produceId:p_id,
                    user_id:user_id,
                    auction_special:auction_special
                },
                type:"post",
                dataType:"json",
                success:function (data) {
                	if(data.extend.list.length==1){
					returnVal = {
						shareTitle:data.extend.list[0].produce_title,//分享的title
						shareLink:window.location.href,//分享的链接
						shareImgurl:data.extend.list[0].images[0].produceImages.split(',')[0],//分享的图片
					};//分享需要发送的数据
                		user_inf = data;
                    var _d = data.extend.list["0"].images;
                    //console.log(_d);
                    fanhuistoreid = data.extend.list[0].storeId;
        			//alert('本地存储的店铺id：'+store_id+' 接口返回的店铺id:'+fanhuistoreid);
                    if(fanhuistoreid == store_id ){//表明是自己的商店的商品
		            	$('.center').css('background','#CCC');
		            	$('.bottom em').css('background','#CCC');
		            }
                    if(data.extend.list["0"].produce_money==0){//一口价为0，不可购买
                    	$('.center').css('background','#CCC');
                    }
                    $.each(_d,function (k,v){
                        $("#index_banner").append('<div class="swiper-slide"><img  src='+v.produceImages+' class="swi-img"></div>');
                    })
                    var swiper = new Swiper('.swiper-container', {
                        loop: true,
                        autoplay: 5000,
                        observer: true,//
                        observeParents: true,//
                        autoplayDisableOnInteraction: false,
                        pagination: '.swiper-pagination'
                    });
                	}
                }
            })
            
            
            /************************/
            new Vue({
                el: 'body',
                data: {
                    guanzhu: '',
                    down_time: '',//倒计时整理好以后的秒数
                    down_time_miao:'',//倒计时的秒数
                    price: '',
                    vInteger_0: '',
                    step1: false,
                    step2: false,
                    step3: false,
                    step4: false,
                    doing: false,
                    store_info_phone:false,//点击头像显示信息
                    death_time: '',
                    isss:false,
                    isguanzhu: '',
                    uid: '',
                    pid: '',
                    datas: '',
                    storeId: '',
                    cjprice: '', //出价价格,
                    isdianzan: 1,
                    iscollect: 1,
                    is1: 1,
                    produce_good_num: '',
                    produce_collect_num: '',
                    telphone: '',
                    pic_num:'',
                    produce_list: [],
					produce_con:1,
					shopnumshow:false,
					shopnum:1,
					RecentTransaction:[],
					auction_id:'',
					isonly:''//用来判断是不是商品只有一件，然后已经有人出价了。这时isonly==1
                },
                ready: function() {
                    let vm = this;
                    var _self = this;
                    _self.uid = sessionStorage.getItem("uid");
                    _self.pid = getQueryString('p_id');
                    this.$http.get(base_url + "ZITAOHUI/store/addBrows", {//添加浏览记录
                        params: {
                            uid: _self.uid,
                            produceid: _self.pid
                        }
                    }).then(function(res) {
                        //console.log("添加浏览记录");
                        //console.log(res);
                    });
                    _self.getJp();
                    setInterval(function() {//为了获取最新的成交人而实时的刷新数据
                        _self.chengjiao();
                    }, 3000);
                },
                methods: {
                	zhifu:function (money){//支付保证金
                		var _self = this;
	                	var appId = "";
						var prepayId = "";
						var timeStamp = "";
						var nonceStr = "";
						var paySign = "";
						var signType = ""; 
						$.ajax({
							type:'Post',
							url: base_url + 'ZITAOHUI/depositWXPay',
							data: {
								auctionId: _self.auction_id,
								total_fee: money,
								userId: sessionStorage.getItem("uid"),
								
							},
							success: function(data) {
								if(data.code == 1) {
									//console.log(data);
									var d = data.extend.data;
									appId = d.appId;
									prepayId = d.package;
									timeStamp = d.timeStamp;
									nonceStr = d.nonceStr;
									paySign = d.paySign;
									signType = d.signType;
									console.log("接口返回的支付参数：" + JSON.stringify(d));
									onBridgeReady();
								} else {
									alert("请求失败，暂无法支付");
								}
							},
							error: function(error) {
				
							}
						});
						function onBridgeReady() {
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": appId, //公众号名称，由商户传入
									"timeStamp": timeStamp, //时间戳，自1970年以来的秒数
									"nonceStr": nonceStr, //随机串
									"package": prepayId,
									"signType": signType, //微信签名方式：
									"paySign": paySign //微信签名
								},
								function(res) {
									//alert("错误信息"+res.err_msg);
									if(res.err_msg == "get_brand_wcpay_request:ok") {
										alert("支付成功");
										_self.step4 = false;
										_self.step3 = true;
										_self.isss = true;
										// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
									} else if(res.err_msg == "get_brand_wcpay_request:cancel") {
										alert("支付失败");
									} else if(res.err_msg == "get_brand_wcpay_request:fail") {
										alert("支付失败");
									}
								}
							);
						}
			       },
			       get_pic_num :function(){//获取图形验证码
						var userMsg = JSON.parse(sessionStorage.userMsg);
						var unionID = userMsg.unionID;
						//console.log(unionID);
						$.ajax({
							type:"GET",
							url:base_url+"ZITAOHUI/verifyCode",
							async:true,
							data:{
								uid:unionID
							},
							success:function(data){
								//console.log(data);
								var img_url ="data:image/png;base64," + data.extend.data;
								//console.log($('#pic_sign_url').length==1);
								$('#pic_sign_url').attr("src",img_url);
							}
						});
					},
                    hahas: function(res) {
                        var now = new Date(res);
                        var year = now.getFullYear();
                        var month = now.getMonth() + 1;
                        var date1 = now.getDate();
                        var hour = now.getHours();
                        var minute = now.getMinutes();
                        var second = now.getSeconds();
                        return  year + "-" + month + "-" + date1 + " " + hour + ":" + minute;

                    },
                    moreinf:function(t){//商品介绍处的文字收缩问题 
                		if($('.pro_details').hasClass('overflowhidden2')){
                			$('.pro_details').removeClass('overflowhidden2');
						$('.check_more').css('background','url(../img/little.png) no-repeat center');
                		}else{
                			$('.pro_details').addClass('overflowhidden2');
						$('.check_more').css('background','url(../img/more.png) no-repeat center');
                		}
                    },
                    kejianding:function(imgs){
                     // window.location.href = imgs ;
                        $('.lookimg').slideDown(300);//显示
                        $('.imgsbox').attr('src',imgs)
                    },
                    closeimg:function(){
                    		$('.lookimg').slideUp(300);//隐藏
                    },
                    tsha: function() {
                        var _self = this;
                        window.location.href = "Complaints.html?pid=" + _self.pid+"&storeid="+_self.storeId;
                    },
                    alertCj: function(money) {
                        var _self = this;
                        var vm = this;
                        this.$http.get(base_url + "ZITAOHUI/isfirst", {
                            params: {
                                uid: _self.uid,
                                store_id: _self.storeId,
                                produceId: _self.pid
                            }
                        }).then(function(res) {
                            if (res.body.extend.list[0].code == 0) {//不能出价，被屏蔽
                                alert("对不起，您已被屏蔽");
                                _self.hideCj();
                            } else if (res.body.extend.list[0].code == 1) {//能出价，但是需要验证手机号
                            	console.log('sessionStorage.s_id='+sessionStorage.s_id+"fanhuistoreid="+fanhuistoreid);
                                if(sessionStorage.s_id == fanhuistoreid){//判断是不是自己的店铺
                                	_self.hideCj();
                                	alert('自己的店铺不能出价！');
                                }else{
                                	_self.step1 = true;
                                	
	                                _self.step2 = false;
	                                _self.step3 = false;
	                                _self.isss = true;
	                                _self.get_pic_num();
                                }
                            } else if (res.body.extend.list[0].code == 2 || res.body.extend.list[0].code == 3) {//能出价，不要验证手机号
                                _self.step1 = false;
                                _self.step2 = false;
                                if(sessionStorage.s_id == fanhuistoreid){
                                	_self.isss = false;
                                	alert('自己的店铺不能出价！');
                                }else{
                                	_self.step3 = true;
                                	_self.step4 = false;
                                	_self.isss = true;
                                }
                            }else if(res.body.extend.list[0].code == 4){//不需要验证手机号
                            	if(sessionStorage.s_id == fanhuistoreid){
                                	_self.isss = false;
                                	alert('自己的店铺不能出价！');
                                }else{
                                	_self.step4 = true;
                            		_self.isss = true;
                                }
                            }
                        })
                    },
                    hideCj: function() {
                        this.step1 = false;
                        this.step2 = false;
                        this.step3 = false;
                        this.step4 = false;
                        this.isss = false;
                        this.shopnumshow = false;
                        this.store_info_phone = false;
                    },
                    show_info_phone: function(){
                    	this.store_info_phone = true;
                    	this.isss = true;
                    },
                    clickGz: function() {
                        //点击关注
                        var _self = this;
                        this.$http.get(base_url + "ZITAOHUI/user/addFans", {
                            params: {
                                uid: _self.uid,
                                storeid: _self.storeId
                            }
                        }).then(function(res) {
                            //console.log(res);
                            if (res.body.code == 1) {
                                alert("关注成功");
                                _self.isguanzhu = 0;
                            } else {
                                alert("关注失败");
                                _self.isguanzhu = 1;
                            }
                        })
                    },
                    cancelGz: function() {
                        //取消关注
                        var _self = this;
                        this.$http.get(base_url + "ZITAOHUI/focus/cancel", {
                            params: {
                                uid: _self.uid,
                                storeid: _self.storeId
                            }
                        }).then(function(res) {
                            alert("取消关注成功");
                            _self.isguanzhu = 1;
                        })
                    },
                    ChangeStepType: function() {//发送短信验证码
                        var _self = this;
                        _self.step2 = true;
                        _self.step3 = false;
                        _self.step1 = false;
                        var userMsg = JSON.parse(sessionStorage.userMsg);
						var unionID = userMsg.unionID;
                        this.$http.get(base_url + "ZITAOHUI/SMSverification", {
                            params: {
                                mobile: _self.telphone,
                                code:_self.pic_num,
                                uid:unionID
                            }
                        }).then(function(res) {
                            if (res.body.code == 1) {
                                alert("验证码发送成功");
                                _self.step2 = true;
                                _self.step3 = false;
                                _self.step1 = false;
                            }else{
                            	alert("图形验证码错误");
                            }
                        })
                    },

                    link_buy: function(t) {
                        ////console.log(t);
                        window.location.href = 'buy-info-page.3.html?p_id=' + t.item.produce_id

                    },
                    ykj: function(t, money) {//一口价进行判断
                    	var vm = this;
                        if (money == 0) {
                            alert("此商品卖家设置不可直接购买，请点击竞拍出价。");
                            return false;
                        }  
                        if(fanhuistoreid == store_id ){//表明是自己的商店的商品
			            	alert('自己的店铺不能购买！');
			            }else{
			            	var _self = this;
			            	_self.shopnumshow = true;//让购买数量显示
			            	_self.isss = true;//遮罩层显示
                        	//window.location.href = 'my-address.html?uid=' + _self.uid + '&produceid=' + _self.pid + '&price=' + money+ "&storeId=" + _self.storeId + "&orderType=2";
			            }
			        },
			        shopnumfun:function(money){
				        	var _self = this;
				        	//console.log("商品的剩余数量："+this.produce_con);
				        	var val = Number($('#shopnum input').val());
				        	//console.log("输入的商品的数量："+val+" 价格："+money);
				        	if(val<1){
				        		alert('购买数量不能小于1');
				        	}else if(val>this.produce_con){
				        		alert('购买数量不能大于商品的剩余数量');
				        	}else{
				        		if(user_inf.extend.list4[0].discount_rate ==100){
				        			var discountRate=0
				        		}else{
				        			var discountRate=user_inf.extend.list4[0].discount_rate
				        		}
				        		window.location.href = 'my-address.html?'+'produceid=' + _self.pid + '&price=' + money+ "&storeId=" + _self.storeId + "&orderType=2"+"&produce_con="+val+"&produce_rate="+discountRate+"&auction_id="+_self.auction_id;
				        	}
			        },
                    add_good: function(t) {
                        ////console.log(t)
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: _self.pid,
                                user_id: _self.uid
                            }
                        }).then(
                            function(data) {
                                ////console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    _self.produce_good_num += 1;
                                    _self.is1 = 0;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试');
                                    _self.is1 = 1;
                                } else {
                                    alert('您已经对该商品点过赞啦');
                                }
                            }
                        )
                    },

                    add_Collection: function(t) {
                        ////console.log(t)
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/conllectionNum', {
                            params: {
                                produceId: p_id,
                                user_id: sessionStorage.getItem("uid")
                            }
                        }).then(
                            function(data) {
                                ////console.log(data)
                                let sun = data.data.extend;
                                sun = sun.list.conllection;
                                if (sun == 1) {
                                    _self.produce_collect_num += 1;
                                    _self.iscollect = 0;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试');
                                    _self.iscollect = 1;
                                } else {
                                    alert('您已经对该商品点过收藏啦');

                                }
                            }
                        )
                    },

                    join_store: function(t) {
                        ////console.log(t)
                        window.location.href = "../page/Shop.html?s_id=" + t.datas.storeId
                    },

                    bid: function(t) {//确认能出价的接口
                        var _self = this;
                        if (_self.cjprice < _self.price + _self.datas.produce_auction_number) {
                            alert("出价必须大于领先价与加价幅度");
                            return false;
                        }
                        // if (_self.cjprice < _self.price ) {
                        //     alert("出价必须大于一口价");
                        //     return false;
                        // }
                        if (_self.RecentTransaction.length == 0) {

                        } else {
                            if (_self.cjprice < _self.RecentTransaction[0].offer + _self.datas.produce_auction_number) {
                                alert("出价必须大于领先价");
                                return false;
                            }
                        }
                        this.$http.get(base_url + "ZITAOHUI/istheFirstOfer", {
                            params: {
                                user_id: _self.uid,
                                produceId: _self.pid,
                                store_id: _self.storeId,
                                money: _self.cjprice
                            }
                        }).then(function(sss) {
                            if (sss.body.code == 1) {
                                alert("出价成功");
                                _self.step1 = false;
                                _self.step2 = false;
                                _self.step3 = false;
                                _self.isss =  false;
                            }
                        })
                    },

                    vInteger_click: (t) => {//短信验证通过以后
                        $.ajax({
                            url: base_url + 'ZITAOHUI/phoneVi',
                            data: {
                                value: t.vInteger_0,
                                mobile: t.telphone
                            },
                            success: (data) => {
                                if (data.code == 1) {
                                    t.step2 = false;
                                    t.step4 = true;
                                }
                            }
                        })
                    },
					
                    hide: function() {
                        this.step1 = false;
                        this.step2 = false;
                        this.step3 = false;
                        this.step4 = false;
                        this.isss = false;
                        this.store_info_phone = false;
                        this.shopnumshow = false;
                    },
                    getTime: function(mss) {
                        var _self = this;
                        if(mss!=undefined&&mss!=''&&mss!=null){
	                        setInterval(function() {
	                            mss--;
	                            if (mss == 0 || mss < 0 ) {
	                                _self.down_time = "已结束";
	                            } else {
	                                var days = Math.floor(mss / 1440 / 60);
	                                var hours = Math.floor((mss - days * 1440 * 60) / 3600);
	                                var minutes = Math.floor((mss - days * 1440 * 60 - hours * 3600) / 60);
	                                var seconds = (mss - days * 1440 * 60 - hours * 3600 - minutes * 60);
	                                _self.down_time =days+"天"+ hours + "小时" + minutes + "分钟" + seconds + "秒";
	                            }
	                        }, 1000);
                        }else{
                        	_self.down_time = "已结束";
                        }
                    },
                    getJp: function() {//获取拍卖品的详情
                        var vm = this;
                        var _self = this;
                        vm.$http.get(base_url + 'ZITAOHUI/auctionProduce', {
                            params: {
                                produceId: _self.pid,
                                user_id: _self.uid,
                                auction_special:auction_special
                            }
                        }).then(
                            function(response) {
                                var all_data = response.data.extend.list[0];
                                _self.storeId = all_data.storeId;
                                _self.price = all_data.starting_price;
                                _self.produce_collect_num = all_data.produce_collect_num;
                                _self.produce_good_num = all_data.produce_good_num;
                                vm.$set('datas', all_data);
                                //console.log('循环刷新的数据：');
                                //console.log(vm.datas);
                                var produce_list = response.data.extend.list4;
                                var guanzhu = response.data.extend.list2;
                                if(_self.down_time_miao==''){
                                	_self.down_time_miao = response.data.extend.list3[0].surplusTime;
                                	_self.getTime(_self.down_time_miao);
                                }
                                _self.produce_con=all_data.produce_con;
                                //vm.$set('a_id', response.data.extend.list3[0].auction_id)
                                vm.$set('produce_list', produce_list);
                                if (guanzhu == 1) {
                                    //vm.$set('guanzhu', '已关注')
                                    _self.isguanzhu = 0;
                                } else {
                                    //vm.$set('guanzhu', '未关注')
                                    _self.isguanzhu = 1;
                                };
		                        if(_self.datas.produce_describe.length>251){//判断字符的长度。
									$('.pro_details').addClass('overflowhidden2');
								}else{
									$('.check_more').css('display','none');
								};
                                var RecentTransaction = all_data.RecentTransaction;
                                vm.$set('RecentTransaction', all_data.RecentTransaction);
                                sessionStorage.seller_storeId = all_data.storeId;//卖家的店铺ID
                                
                                _self.auction_id = response.data.extend.list3[0].auction_id;
                            }
                        );
                    },
                    chengjiao:function(){//刷新最新成交人的函数，要写在循环中
                    	var vm = this;
                        var _self = this;
                        vm.$http.get(base_url + 'ZITAOHUI/auctionProduce', {
                            params: {
                                produceId: _self.pid,
                                user_id: _self.uid,
                                auction_special:auction_special
                            }
                        }).then(
                            function(response) {
                                var all_data = response.data.extend.list[0];
                                vm.$set('RecentTransaction', all_data.RecentTransaction);
                                sessionStorage.seller_storeId = all_data.storeId;//卖家的店铺ID
                                
                            }
                        );
                    }
                }
            })
        })

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        getComment();
        function getComment() {
            //加载评论
            $.ajax({
                url: base_url + "ZITAOHUI/assess/list",
                type: "post",
                data: {
                    produceId: getQueryString('p_id')
                },
                dataType: "json",
                success: function(data) {
                    if (data.code == 1) {
                        var _d = data.extend.data;
                        $("#comment").html('');
                        ////console.log(_d);
                        if (_d.length == 0) {
                            $("#comment").html('<div style="text-align: center;margin-top: 20px;">' + "暂无评价" + '</div>');
                            return false;
                        }
                        $.each(_d, function(k, v) {
                            //console.log(v.user_image);
                            $("#comment").append('<div class="new_pai">' +
                                					'<div class="new_pai_on">' +
                                						'<div class="new_pai_on_left">' +
                                							'<img src="' + v.user_image + '" >' +
                                						'</div>' +
                                						'<div class="new_pai_on_right">' + v.user_nike_Name + '</div>' +
                                					'</div>' +
                                					'<div class="new_pai_center">' + v.content + '</div>' +
                                					'<div style="overflow: hidden;padding: 0 5px;box-sizing: border-box;">'+ruimg(v.img1,v.img2,v.img3)+'</div>'+
                                					'<div class="new_pai_up">' + returnTime(v.add_date) + '</div>' +
                                				'</div>');
                        })
                    } else {
                        //console.log("网络请求超时");
                    }
                }
            })
        }
        function ruimg (a,b,c){
            //返回评价三张图片
            var aa = '';
            var bb = '';
            var cc = '';
            if(a){
                 aa = '<img src='+a+' class="imghaha">';
            }
            if(b){
                bb = '<img src='+b+' class="imghaha">';
            }
            if(c){
                cc = '<img src='+c+' class="imghaha">';
            }
            return aa+bb+cc;
        }
        function returnTime(res) {
            var now = new Date(res);
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute;
        }
    </script>
</html>